<template>
  <div class="attachConfig-box">
    <el-drawer
        title="机构配置"
        :visible.sync="dialogShow"
        :with-header="true"
        :size="device === 'mobile'?'80%':'35%'"
        >
        <div class="drawer_content" style="padding:0 20px 20px;">
          <el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
            <el-form-item label="主键" prop="id">
              <el-input
                v-model="form.id"
                style="width: 100%"
                placeholder="请输入"
                clearable
                disabled
              />
            </el-form-item>
            <el-form-item label="申请人数(基数)" prop="applyNum">
              <el-input
                v-model="form.applyNum"
                style="width: 100%"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="产品简介" prop="claimMsg">
              <el-input
                v-model="form.claimMsg"
                style="width: 100%"
                type="textarea"
                placeholder="请输入"
                clearable
                :autosize="{ minRows: 7}"
              />
            </el-form-item>
            <el-form-item label="年化率" prop="yearRate" >
              <el-input-number 
                v-model="form.yearRate" 
                controls-position="right" 
                placeholder="请输入"
                :min="0"
                style="width: 100%;"
              >
              </el-input-number>
            </el-form-item>
          </el-form>
          <div class="drawer_footer" style="text-align: center;">
            <el-button type="primary" @click="handleSubmit('formRef')"
              >确 定</el-button
            >
            <el-button @click="handleClose">取 消</el-button>
          </div>
        </div>
      </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  setAttachConfig
} from '@/api/business/productManagement'
export default {
  name: 'AttachConfig',
  data() {
    return {
      // 机构配置抽屉显示状态
      dialogShow: false,
      // 机构配置的表单信息
      form: {

      },
      // 机构配置表单校验规则
      rules: {

      },
    };
  },
  computed:{
    ...mapGetters(["sidebar", "device"]),
  },
  methods: {
    // 打开抽屉
    openDrawer(data){
        this.dialogShow = true
        // 设置表单数据
        this.$set(this,'form',data)
    },
    /*提交操作*/
    handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            console.log(params);
            // 预警设置操作
            setAttachConfig(params).then((res) => {
                 if (res.code === 200) {
                   this.$message.success("操作成功");
                   // 关闭抽屉
                   this.handleClose();
                 }
               });
          }
        });
    },
    /*关闭抽屉*/
    handleClose() {
       this.$refs["formRef"].resetFields();
       this.form = this.$options.data().form;
       this.dialogShow = false;
     },
  },

};
</script>

<style scoped lang='scss'>
.attachConfig-box{

}
</style>